<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:body>
        <ui:composition template="./../template/main.xhtml">
            <ui:define name="content">
                <h1 class="title ui-widget-header ui-corner-all ">QUẢN LÝ LOẠI SẢN PHẨM</h1>
                <p:growl id="messages"/>
                <p:outputPanel deferred="true">
                <h:form>
                    <p:commandButton id="btnCreate" action="#{categoryController.resetSelectCategory()}" update=":formCreate" oncomplete="PF('dialogCreate').show()" icon="icon-create" title="Thêm Loại Sản Phẩm" value="Thêm Loại Sản Phẩm"/>
                </h:form>
                <h:form id="formDataTable">
                    <p:dataTable style="text-align: center" id="categoryform" var="category" value="#{categoryController.listcategory}" paginator="true" rows="10" 
                                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}" rowsPerPageTemplate="5,10,15" 
                                 emptyMessage="Không tìm thấy loại sản phẩm nào...">

                        <p:column headerText="ID" style="width:5%; text-align: center" sortBy="#{category.id}" filterBy="#{category.id}">
                            <h:outputText value="#{category.id}"/>
                        </p:column>

                        <p:column headerText="Tên Loại Sản Phẩm" style="width:25%; text-align: center" sortBy="#{category.name}" filterBy="#{category.name}">
                            <h:outputText value="#{category.name}" />
                        </p:column>
                        <p:column headerText="Hoạt động" style="width:15%" >
                            <p:commandButton style="padding-right: 5px;" id="btnUpdate" update=":formUpdate" oncomplete="PF('dialogUpdate').show()" icon="ui-icon ui-icon-wrench" title="Sửa loại sản phẩm">
                                <f:setPropertyActionListener value="#{category}" target="#{categoryController.selectcategory}" />  
                            </p:commandButton>
                            <p:commandButton id="btnDelete" update=":formDelete" oncomplete="PF('confirmation').show()" icon="ui-icon-close" title="Xóa loại sản phẩm">
                                <f:setPropertyActionListener value="#{category}" target="#{categoryController.selectcategory}" />  
                            </p:commandButton>
                        </p:column>
                    </p:dataTable>  
                </h:form>
                <!--Create-->
                <h:form id="formCreate">
                    <p:dialog header="Thêm loại sản phẩm" widgetVar="dialogCreate" resizable="false" 
                              showEffect="fade" hideEffect="explode" modal="true">  
                        <h:panelGrid cellpadding="10" id="display" columns="2" style="margin: 10px;">  

                            <h:outputLabel for="title"  value="Tên:" style="padding: 2px" />  
                            <p:inputText id="title" value="#{categoryController.selectcategory.name}" required="true"/>  
                            <f:facet name="footer">
                                <p:separator/>
                                <p:commandButton id="btnCreateAccept" actionListener="#{categoryController.btnCreate()}" update=":formDataTable, :messages" oncomplete="dialogCreate.hide()" icon="ui-icon-contact" title="Create" value="Create"/>
                                <p:commandButton id="btnCreateCancel" action="#{categoryController.resetSelectCategory()}"  oncomplete="dialogCreate.hide();" icon="icon-create" title="Cancel" value="Cancel"/>
                            </f:facet>
                        </h:panelGrid>
                    </p:dialog>  
                </h:form>
                <h:form id="formUpdate">
                    <p:dialog header="Sửa loại sản phẩm" widgetVar="dialogUpdate" resizable="false"
                              showEffect="fade" hideEffect="explode" modal="true">  
                        <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:10px;">
                            
                            <h:outputLabel for="title"  value="Tên:" style="padding: 2px" />  
                            <p:inputText id="title" value="#{categoryController.selectcategory.name}" required="true"/>  

                    

                            <f:facet name="footer">
                                <p:separator/>
                                <p:commandButton actionListener="#{categoryController.btnUpdate()}" id="btnUpdateAccept" update=":formDataTable, :messages" oncomplete="dialogUpdate.hide();" icon="icon-create" title="Update" value="Update"/>
                                <p:commandButton id="btnUpdateCancel" action="#{categoryController.resetSelectCategory()}" oncomplete="dialogUpdate.hide();" icon="icon-cancel" title="Cancel" value="Cancel"/>
                            </f:facet>
                        </h:panelGrid>  
                    </p:dialog>  
                </h:form>
                <h:form id="formDelete">
                    <p:confirmDialog closable="false" showEffect="fade" hideEffect="explode" severity="alert" widgetVar="confirmation"
                                     message="Bạn có muốn xóa loại sản phẩm này?" header="Xóa bài viết" style="margin:5px auto;">
                        <h:panelGroup layout="block" style="text-align: right">
                            <p:commandButton value="Yes" action="#{categoryController.btnDelete()}" update=":formDataTable, :messages" oncomplete="confirmation.hide();" />
                            <p:commandButton value="No" action="#{categoryController.resetSelectCategory()}" oncomplete="confirmation.hide();" />
                        </h:panelGroup>
                    </p:confirmDialog>
                </h:form>
                </p:outputPanel>
            </ui:define>
        </ui:composition>
    </h:body>
</html>
